<template>
    <div class="wz-legend" :style="{right: getIsHideAssist ? '20px' : '500px'}">
           <div class="legend-word">
             图例
            <!-- <i class="el-icon-caret-right"></i>-->
           </div>
           <ul>
<!--               <li v-for="(item,index) in data" :key="index">-->
<!--                    <i class="wz-icon teamIcon"></i>-->
<!--                    <span>{{item.name}}</span>-->
<!--               </li>-->
               <li v-for="(item,index) in data" :key="index">
                   <i class="bh-icon" :style="`background-color: ${item.color}`"></i>
                   <span>{{item.name}}</span>
               </li>
           </ul>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
 import MapCommon from '@/util/MapCommon';

 @Component({
    mixins: [MapCommon],
  })
export default class Legend extends Vue {
     private data = [
         { name: '物资需求单位', color: '#ce3636' },
         { name: '物资管理单位', color: '#14f791' }
     ];
     get getIsHideAssist() {
    return this.$store.state['layoutModule' as any].isHideAssist;
  }

}
</script>
<style lang="less" scoped>
.wz-legend {
    width: 198px;
    height: 152px;
    padding-top: 35px;
    background: url('../../../../assets/img/legend/legend_bg.png') no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    position: absolute;
    bottom: 40px;
    right: 500px;
    .legend-word {
        position: absolute;
        top: -19px;
        right: 13px;
        font-size: 16px;
        line-height: 32px;
        color: #fff;
        text-align: center;
        background: url('../../../../assets/img/legend/legend_word.png') no-repeat 0 0;
        background-size: 100% 100%;
        width: 120px;
        height: 32px;
        border: 1px solid #00ffff;
        border-radius: 18px;
       i {
           color: #00ffff;
       }
    }
    li {
        position: relative;
        list-style: none;
        //cursor: pointer;
      .bh-icon {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        left:-10px;
        top: 50%;
        margin-top: -8px;
      }
      span {
           font-size: 18px;
           height: 42px;
           line-height: 42px;
           color: #fff;
           display: inline-block;
           padding-left: 20px;
      }
        i {
            width: 30px;
            height: 30px;
            display: inline-block;
            position: absolute;
            left: -15px;
            margin-top: 6px;
        }

    }
    /*:nth-of-type(1) .teamIcon {*/
    /*    background: url("../../../../assets/img/legend/wzxqdw.png") no-repeat;*/
    /*    background-size: 100% 100%;*/
    /*}*/
    /*:nth-of-type(2) .teamIcon {*/
    /*    background: url("../../../../assets/img/legend/wzgldw.png") no-repeat;*/
    /*    background-size: 100% 100%;*/
    /*}*/
    li:nth-child(2) {
        .legend-icon {
          background: url("../../../../assets/img/legend/icon2.png") no-repeat;
      }
    }
    li:nth-child(3) {
        .legend-icon {
          background: url("../../../../assets/img/legend/icon3.png") no-repeat;
      }
    }
    header {
        background: url("../../../../assets/img/legend/close.png") no-repeat;
        background-size: 100% 100%;
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 138px;
        right: 272px;
        z-index: 22;
        cursor: pointer;
    }
    .content-list {
        position: relative;
        .cur {
            display: none;
        }
        .container {
            position: absolute;
            right: 280px;
            bottom: 40px;
        }
        .list {
            font-size: 20px;
            color: #fff;
            span {
                font-size: 26px;
                text-align: center;
                padding-left: 70px;
                padding-right: 40px;
            }
        }
        .team {
            background: url("../../../../assets/img/legend/team.png") no-repeat;
            background-size: 100% 100%;
            width: 370px;
            height: 80px;
            line-height: 80px;
            z-index: 20;
            i {
                font-size: 26px;
                color: #6ad989;
                padding-right: 10px;
            }
        }
        .per {
            background: url("../../../../assets/img/legend/per.png") no-repeat;
            background-size: 100% 100%;
            width: 370px;
            height: 80px;
            line-height: 80px;
            margin-top: -18px;
            i {
                font-size: 26px;
                color: #cc9d45;
                padding-right: 10px;
            }
        }
    }
}
</style>


